<template>
    <div class="outer">
        <div class="inner">
            <div class="select_list">
                <div class="list_left">擅长类型:</div>
                <div class="list_center">
                    <div class="list_wapper" :style="flodLength">

                        <el-checkbox  style="margin-right: 0px;" class="mycheckbox"  v-for="item in typeList" :key="item.id" :label="item.id" v-model="checkList">
                            <div>{{item.creationTypeName}}</div>
                        </el-checkbox>

                    </div>
                    <div class="list_block">

                    </div>
                </div>
<!--                <div class="list_right" @click.stop="fold">-->
<!--                    隐藏更多<i :class="isFold?'el-icon-arrow-down': 'el-icon-arrow-up'"></i>-->
<!--                </div>-->
            </div>


            <div class="articleList">
                <div v-for="item in authorList" :key="item.id" class="listItem" @click="toDetail(item.id)">
                    <div class="item_category">
                        <div class="item_category_inner">
                            {{item.classifyNames[0]}}
                        </div>
                    </div>
                    <div class="item_right">
                        <div class="author_name">
                            {{item.name}}
                        </div>
                        <div class="item_content">
                            {{item.description}}
                        </div>
                        <div class="articleCount">
                            <i class="iconfont icon-book"></i><span>共{{item.scriptWritingNum}}剧本</span>
                        </div>
                        <div class="item_choose">

                            <div class="item_price">
<!--                                ￥200-->
                            </div>

                            <div class="item_yuegao" @click.stop="yuegao(item)">
                                找TA约稿
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="fen_ye_qi">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="currentChange"
                        :current-page="current_page"
                        @prev-click="prevClick"
                        @next-click="nextClick">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {CreationTypeListByTypeId} from "../../../api/ScriptWriting";
    import {GetAuthorList} from "../../../api/UserInfo";

    export default {
        name: "authorList",
        data(){
          return{
              isFold:true,
              flodLength:{},
              authorList:[],
              total:undefined,
              current_page:1,
              typeList:[],
              checkList:[],
          }
        },
        watch:{
          checkList(){

              //获取作者列表数据
              let data={
                  creationTypeId:1,
                  classifyIds:this.checkList.join(','),
                  page:this.current_page,
                  pagesize:8,
              }

              GetAuthorList(data).then(res=>{
                  //   判断总共有多少页

                  if(res.total<=8){
                      this.total=10
                  }else{
                      //    判断总数是否为8的整倍数
                      if((parseInt(res.total) % 8) != 0){

                          this.total=parseInt(parseInt(res.total) / 8)*10+10

                      }else{

                          this.total=parseInt(parseInt(res.total) / 8)*10

                      }

                  }

                  // 获取authorList数据
                  this.authorList=res.data

              })

          }
        },
        mounted(){

            // 获取分类数据
            CreationTypeListByTypeId({typeid:1}).then(res=>{
                res.data.forEach(item=>{
                    this.typeList=this.typeList.concat(item.creationTypeModels)
                })

                //请求回来之后再发送请求
                //获取作者列表数据
                let data={
                    creationTypeId:1,
                    classifyIds:this.checkList.join(','),
                    page:this.current_page,
                    pagesize:8,
                }

                GetAuthorList(data).then(res=>{
                    //   判断总共有多少页

                    if(res.total<=8){
                        this.total=10
                    }else{
                        //    判断总数是否为8的整倍数
                        if((parseInt(res.total) % 8) != 0){

                            this.total=parseInt(parseInt(res.total) / 8)*10+10

                        }else{

                            this.total=parseInt(parseInt(res.total) / 8)*10

                        }

                    }

                    // 获取authorList数据
                    this.authorList=res.data
                    console.log('authorlist',this.authorList)

                })

            })





        },
        methods:{
            fold(){
              this.isFold=!this.isFold
              if(this.isFold){
                  this.flodLength.height="20px"
              }else{
                  let rows=this.typeList.length/7
                  this.flodLength.height=rows*40+"px"
              }
            },
            toDetail(id){
                this.$router.push({path:'/dsp/authorDetail',query:{id:id}})
            },
            yuegao(author){
                console.log('作者为',author)
                this.$router.push({path:'/dsp/upArticle',query:{id:author.id,author:author.name}})
            },

            currentChange(res){
                this.current_page=res

                //获取作者列表数据
                let data={
                    creationTypeId:1,
                    classifyIds:this.checkList.join(','),
                    page:this.current_page,
                    pagesize:8,
                }

                GetAuthorList(data).then(res=>{

                    //   判断总共有多少页

                    if(res.total<=8){
                        this.total=10
                    }else{
                        //    判断总数是否为8的整倍数
                        if((parseInt(res.total) % 8) != 0){

                            this.total=parseInt(parseInt(res.total) / 8)*10+10

                        }else{

                            this.total=parseInt(parseInt(res.total) / 8)*10

                        }

                    }

                    // 获取authorList数据
                    this.authorList=res.data

                })

            },

            prevClick(){

            },

            nextClick(){

            }
        },
    }
</script>

<style scoped>
    .outer{
        width: 100%;
        overflow: hidden;
    }
    .inner{
        width: 1001px;
        margin: 0px auto;
        background: #F3F3F3;
        margin-top: 15px;
    }
    .select_list{
        width: 100%;
        display: flex;
        justify-content: space-between;
        background: #FFFFFF;
    }
    .list_left{
        margin-top: 42px;
        margin-left: 42px;

        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }
    .list_center{
        width: 753px;
    }
    .list_wapper{
        width: 100%;
        /*height: 20px;*/
        clear: both;
        overflow: hidden;
        margin-top: 31px;
        transition: .5s;
    }
    .list_block{
        width: 100%;
        height: 37px;
    }
    .mycheckbox{
        /*align-items: flex-start;*/
        /*float: left;*/
        /*margin-right: 0px;*/
    }
    .mycheckbox div{
        margin-top: -3px;
        margin-left: -4px;
        width: 80px;
        height: 20px;
        line-height: 20px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .list_right{
        margin-top: 30px;
        margin-right: 45px;

        font-size: 12px;
        line-height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }
    .list_right i{
        margin-left: 8px;
    }

    .articleList{
        width: 100%;
        /*height: 1100px;*/
        min-height: 260px;
        /*max-height: 1100px;*/
        max-height: 1120px;
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .listItem{
        width: 490px;
        height: 260px;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        display: flex;
        cursor: pointer;
        margin-bottom: 20px;
    }
    .item_category{
        width: 50px;
        height: 260px;
        background: #2EB0C6;
        border-radius: 4px 0px 0px 4px;
        display: flex;
        align-items: center;
    }
    .item_category_inner{
        width: 17px;
        min-height: 0px;
        max-height: 255px;
        /*height: 100px;*/
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        margin: 0px auto;
        overflow: hidden;
    }

    .item_right{
        flex-grow: 1;
        background: #FFFFFF;
        position: relative;
    }

    .author_name{
        font-size: 18px;
        line-height: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        margin-top: 30px;
        margin-left: 19px;
    }

    .item_content{

        width: 386px;
        height: 48px;
        font-size: 14px;
        line-height: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;

        margin-left: 19px;
        margin-top: 27px;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .articleCount{
        margin-top: 24px;
        margin-left: 20px;
    }
    .articleCount>i{
        margin-top: 23px;
    }
    .articleCount>span{
        margin-top: 24px;
        margin-left: 6px;
    }
    .item_choose{
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 70px;
        border-top: 1px solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .item_choose>div:nth-of-type(1){
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
        margin-left: 19px;
    }

    .item_choose>div:nth-of-type(2){

        width: 92px;
        height: 36px;
        background: rgba(46, 176, 198, 0.15);
        border: 1px solid #2EB0C6;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2EB0C6;
        line-height: 36px;
        text-align: center;
        margin-right: 29px;
    }

    .fen_ye_qi{
        min-width: 109px;
        max-width: 430px;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26px;
        margin-bottom: 115px;
    }
</style>
